import React from 'react';
import { Modal, Form, Input, Select, DatePicker, Button, Row, Col, Divider } from 'antd';
import './AddPatientModal.css'; // 新增导入样式文件

const { Option } = Select;
const { TextArea } = Input;

const AddPatientModal = ({ 
  visible, 
  onCancel, 
  onOk, 
  patientData, 
  onFieldChange,
  form 
}) => {
  return (
    <Modal
      title={patientData.recordNumber ? "修改患者信息" : "新增患者"}
      visible={visible}
      onCancel={onCancel}
      onOk={onOk}
      width={1000}
      footer={[
        <Button key="back" onClick={onCancel}>
          取消
        </Button>,
        <Button key="submit" type="primary" onClick={onOk}>
          保存
        </Button>,
      ]}
    >
      <Form form={form} layout="vertical">
        {/* 基础信息区域 */}
          <h4 style={{ fontWeight: 'bold', marginBottom: 16 }}>基本信息</h4>
          <Row gutter={16}>
            <Col span={6}>
              <Form.Item
                label="姓名"
                name="name"
                rules={[{ required: true, message: '请输入患者姓名' }]}
              >
                <Input value={patientData.name} onChange={(e) => onFieldChange('name', e.target.value)} />
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item
                label="年龄"
                name="age"
                rules={[{ required: true, message: '请输入患者年龄' }]}
              >
                <Input 
                  type="number" 
                  value={patientData.age}
                  onChange={(e) => onFieldChange('age', e.target.value)}
                />
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item
                label="性别"
                name="gender"
                rules={[{ required: true, message: '请选择患者性别' }]}
              >
                <Select
                  value={patientData.gender}
                  onChange={(value) => onFieldChange('gender', value)}
                >
                  <Option value="男">男</Option>
                  <Option value="女">女</Option>
                </Select>
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item
                label="手机号"
                name="phone"
                rules={[
                  { required: true, message: '请输入手机号' },
                  { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号' }
                ]}
              >
                <Input value={patientData.phone} onChange={(e) => onFieldChange('phone', e.target.value)} />
              </Form.Item>
            </Col>
          </Row>
  
          <Row gutter={12}>
            <Col span={12}>
              <Form.Item
                label="就诊日期"
                name="date"
                rules={[{ required: true, message: '请选择就诊日期' }]}
              >
                <DatePicker 
                  style={{ width: '100%' }}
                  onChange={(date, dateString) => onFieldChange('date', dateString)}
                />
              </Form.Item>
            </Col>
            {/* 其他列可以在这里添加 */}
          </Row>
  
          <Divider 
            orientation="left"
            style={{
              backgroundColor: '#1890ff', // 蓝色 - 诊断信息
              color: 'white',
              padding: '8px 16px',
              borderRadius: '4px',
              border: 'none',
              fontWeight: 'bold',
              margin: '24px 0 16px 0'
            }}
          >
            诊断信息
          </Divider>
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item
                label="主要诊断"
                name="diagnosis.main"
                rules={[{ required: true, message: '请输入主要诊断' }]}
              >
                <Input 
                  value={patientData.diagnosis?.main}
                  onChange={(e) => onFieldChange('diagnosis.main', e.target.value)}
                />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label="严重程度"
                name="diagnosis.severity"
                rules={[{ required: true, message: '请选择严重程度' }]}
              >
                <Select
                  value={patientData.diagnosis?.severity}
                  onChange={(value) => onFieldChange('diagnosis.severity', value)}
                >
                  <Option value="轻度">轻度</Option>
                  <Option value="中度">中度</Option>
                  <Option value="重度">重度</Option>
                </Select>
              </Form.Item>
            </Col>
          </Row>
  
          <Form.Item
            label="次要诊断"
            name="diagnosis.secondary"
          >
            <Input 
              value={patientData.diagnosis?.secondary}
              onChange={(e) => onFieldChange('diagnosis.secondary', e.target.value)}
            />
          </Form.Item>
  
          <Form.Item
            label="诊断描述"
            name="diagnosis.description"
          >
            <TextArea 
              rows={3}
              value={patientData.diagnosis?.description}
              onChange={(e) => onFieldChange('diagnosis.description', e.target.value)}
            />
          </Form.Item>
  
          <Divider 
            orientation="left"
            style={{
              backgroundColor: '#52c41a', // 绿色 - 病史信息
              color: 'white',
              padding: '8px 16px',
              borderRadius: '4px',
              border: 'none',
              fontWeight: 'bold',
              margin: '24px 0 16px 0'
            }}
          >
            病史信息
          </Divider>
          <Form.Item
            label="既往病史"
            name="medicalHistory"
          >
            <TextArea 
              rows={3}
              value={patientData.medicalHistory}
              onChange={(e) => onFieldChange('medicalHistory', e.target.value)}
            />
          </Form.Item>
  
          <Form.Item
            label="过敏史"
            name="allergyHistory"
          >
            <TextArea 
              rows={2}
              value={patientData.allergyHistory}
              onChange={(e) => onFieldChange('allergyHistory', e.target.value)}
            />
          </Form.Item>
  
          <Divider 
            orientation="left"
            style={{
              backgroundColor: '#fa8c16', // 橙色 - 检查与治疗
              color: 'white',
              padding: '8px 16px',
              borderRadius: '4px',
              border: 'none',
              fontWeight: 'bold',
              margin: '24px 0 16px 0'
            }}
          >
            检查与治疗
          </Divider>
          <Form.Item
            label="检查项目"
            name="examination"
          >
            <Select
              mode="tags"
              value={patientData.examination}
              onChange={(value) => onFieldChange('examination', value)}
              placeholder="请添加检查项目"
            />
          </Form.Item>
  
          <Form.Item
            label="治疗方案"
            name="treatment"
          >
            <TextArea 
              rows={3}
              value={patientData.treatment}
              onChange={(e) => onFieldChange('treatment', e.target.value)}
              placeholder="请输入治疗方案"
            />
          </Form.Item>
  
          <Form.Item
            label="出院建议"
            name="dischargeAdvice"
          >
            <TextArea 
              rows={3}
              value={patientData.dischargeAdvice}
              onChange={(e) => onFieldChange('dischargeAdvice', e.target.value)}
            />
          </Form.Item>
        </Form>
      </Modal>
    );
};

export default AddPatientModal;